<template>
  <!-- 收回的迷你播放器 -->
  <van-cell :class="['mini-player', layout]" v-show="show" :border="false" center>
    <template #icon>
      <img
        class="mini-player__icon"
        :class="audioPlayState ? 'playStart' : 'playStop'"
        v-lazy="currentPlaySong.picUrl"
        @click="togglePlayer"
      />
    </template>
    <template #title>
      <div class="mini-player__title">
        <p class="songname">{{ currentPlaySong.name }}</p>
        <span class="songauthor">{{ currentPlaySong.author }}</span>
      </div>
    </template>
    <template #right-icon>
      <van-icon v-if="audioPlayState" @click.stop="togglePlayState" class-prefix="my-icon" name="play" />
      <van-icon v-if="!audioPlayState" @click.stop="togglePlayState" class-prefix="my-icon" name="timeout" />
      <van-icon @click.stop="toggleMenuShow" class-prefix="my-icon" name="musiclist" />
    </template>
  </van-cell>
</template>

<script setup>
import { useMyStores } from '@/store';

defineProps({
  show: {
    type: Boolean,
    default: false
  },
  layout: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['togglePlayState', 'toggleMenuShow']);

const { playerStore, audioPlayState, currentPlaySong } = useMyStores();

// 切换大小播放器
const togglePlayer = () => {
  playerStore.SET_MINI_PLAYER(false);
  playerStore.SET_FULL_PLAYER(true);
};
const togglePlayState = () => {
  emit('togglePlayState');
};
const toggleMenuShow = () => {
  emit('toggleMenuShow');
};
</script>

<style lang="less" scoped>
/** 迷你播放器 */
.mini-player {
  height: 56px;
  display: flex;
  align-items: center;
  background: #ec4141;
  // transition: all linear 0.3s;
  .mini-player__icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
  }
  .playStart {
    animation: rotate 20s linear infinite;
    animation-play-state: running;
    -webkit-animation-play-state: running;
  }
  .playStop {
    animation-play-state: paused;
    -webkit-animation-play-state: paused;
  }
  .mini-player__title {
    height: 40px;
    margin-left: 10px;
    .songname {
      display: block;
      max-width: 150px;
      height: 20px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #fff;
      font-size: 14px;
      line-height: 20px;
    }
    .songauthor {
      display: block;
      height: 16px;
      color: rgb(255 255 255 / 60%);
      font-size: 12px;
      line-height: 16px;
    }
  }
  .my-icon {
    color: #fff;
  }
}
/* 唱片旋转 */
@keyframes rotate {
  from {
    transform: rotate(0);
  }
  to {
    transform: rotate(360deg);
  }
}
.mini-player-layout {
  position: fixed;
  left: 0;
  bottom: 50px;
}
.mini-player-other {
  position: fixed;
  left: 0;
  bottom: 0;
}
</style>
